<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯天气</title>
    <link rel="stylesheet" href="css/TXweather.css">
    <script src="jquery1.9/jquery-1.9.0.min.js"></script>
    <script src="js/TXweather.js"></script>
    <script src="template.js"></script>
    <link rel="stylesheet" href="swiper-5.4.5/package/css/swiper.css">
    <script src="swiper-5.4.5/package/js/swiper.js"></script>
</head>
<body>
    <div class="container">
        <div class="top">
            <script id="template1" type="text/html" >
                <span style="font-size:55px;">{{degree}}°</span>
                <span>{{weather}}</span>
                <div style="display:flex;justify-content:space-around">
                    <div>▷{{wind_direction1}} {{wind_power}}级</div>
                    <div>☂湿度{{humidity}}%</div>
                    <div>℗气压{{pressure}}Pa</div>
                </div>
                <div>
                    <p>
                    {{if weather=="晴"}}
                    &nbsp;&nbsp;&nbsp;●{{晴天}}&nbsp;&nbsp;<span id="sunny"></span>
                    {{else}}
                    &nbsp;&nbsp;&nbsp;●{{非晴天}}&nbsp;&nbsp;<span id="sunny"></span>
                    {{/if}}
                    </p>
                </div>
            </script>
            <div class="topleft">
                <!-- <p class="topleftdegree"></p> -->
            </div>
            <div class="topright"></div>
        </div>

        <div class="one_hour">
            <div class="one_hour_word">
                <span style="font-size: 19px;">●逐小时预报 </span>
                <span style="color: #ccc;font-weight: bold;">数据来源于中国天气网</span>
                <span style="font-size: 20px;position: absolute;right: 20px;cursor: pointer;">
                    <span id="leftchangehours">◁</span>
                    <span id="rightchangehours">▷</span>
                </span>
            </div>
            <!-- 创建12个div -->
            <script id="template2" type="text/html">
                    {{each forecast_1h hour}}
                        <div class="swiper-slide hour" style="width:100px;">
                            <p>{{hour.time}}:00</p>
                            <p>
                                {{if hour.time>hour.sunrise.substring(0,2) && hour.time<=hour.sunset.substring(0,2)}}
                                <img style="width:40px" src="http://192.168.22.8:81/getImage.php?img={{hour.weather_code}}&type=day" alt="">
                                {{else}}
                                    <img style="width:40px" src="http://192.168.22.8:81/getImage.php?img={{hour.weather_code}}&type=night" alt="">
                                 {{/if}}
                            </p>
                            <p>{{hour.degree}}°</p>
                        </div>
                    {{/each}}
            </script>
            <div class="swiper-container">
                <div class="one_hour_detail1 swiper-wrapper">

                </div>
                <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
            </div>
            <script>
                var mySwiper=new Swiper(".swiper-container",{
                 direction : 'horizontal',//Swiper的滑动方向
                 loop:true,//循环
                 //前进后退按钮
                 navagation:{
                     nextEl: '.swiper-button-next',
                     prevEl: '.swiper-button-prev'
                 },
                 effect : 'horizontal',//切换效果
                 slidesPerView:12,//同一个页面同时显示12个滑块
                });
            </script>
        </div>

        <div class="bigbody">
            <div class="sevendays"></div>
            <div class="life">
                <div class="lifeword">
                    <p>·生活指数</p>
                </div>
                <div class="sixbox">
                    <!-- 此处6个 -->
                    <div style="border: 1px solid black;"></div>
                    <div style="border: 1px solid black;"></div>
                    <div style="border: 1px solid black;"></div>
                    <div style="border: 1px solid black;"></div>
                    <div style="border: 1px solid black;"></div>
                    <div style="border: 1px solid black;"></div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>